<template>
	<view class="wallet-page">
		<view class="card">
			<view class="con-title"> {{$t('Page.user.ckje')}} </view>
			<view class="rechargeInput">
				<text class="coin">R$</text>
				<input class="uni-input" type="text" v-model="rechargeAmount" disabled />
			</view>
			<view class="rechargeAmountBox">
				<view :class="['chargeAmount',{'chargeAmountActive': chargeAmountCurrent === key}]"
					v-for="item, key in charge_list" :key="'charge'+key" @click="clickCharge(item, key)">
					<view> R${{ key }} </view>
					<view class="bouns-money" v-show="isPar && Number(item) !== 0"> +R${{ item }} </view>
				</view>
			</view>
			<view class="noParBox">
				<checkbox-group @change="checkboxChange">
					<label>
						<checkbox value="cb" color="#FFFFFF" /> {{$t('Page.user.bcjmbhd')}}
					</label>
				</checkbox-group>
			</view>
		</view>
		<view class="payType">
			<view class="title"> {{$t('Page.mineWallet.paymentMethod')}} </view>
			<view class="pay-item">
				<image class="check-icon" :src="`/static/image/Mine/checked-${theme}.png`"></image>
				<text>{{$t('Page.mineWallet.onlinePayment')}}</text>
			</view>
		</view>
		<view class="btn submit-btn cursor" @click="openPopup">{{$t('Page.user.ck')}}</view>
		<view class="card" v-if="chargeseting.charge_remark">
			<view class="remark">
				{{chargeseting.charge_remark}}
			</view>
		</view>
		<!-- 充值弹框 -->
		<uni-popup ref="rechargePopup" type="center" :is-mask-click="false">
			<view class="popup-cont">
				<view class="header">
					<view class="title">
						{{ $t('Page.mineWallet.confirmRecharge') }}
					</view>
					<image class="close-icon" src="/static/image/close.png" @click="handleClose"></image>
				</view>
				<view class="row">
					<view>
						{{ $t('Page.mineWallet.total') }}
					</view>
					<view>
						R${{rechargeAmount}}
					</view>
				</view>
				<view class="row" v-if="isPar">
					<view>
						{{ $t('Page.mineWallet.bonus') }}
					</view>
					<view class="bouns">
						R${{curBonus}}
					</view>
				</view>
				<view class="row">
					<view>
						{{ $t('Page.mineWallet.paymet') }}
					</view>
					<view>
						{{ $t('Page.mineWallet.onlinePayment') }}
					</view>
				</view>
				<button :disabled="isLoading" class="btn confrim-btn" @click="handeleDeposit">
					{{ $t('Page.mineWallet.confirm') }}
				</button>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import {
		sendMessage
	} from '@/api/websocket.js'
	import {
		Debounce
	} from '@/utils/common.js'
	export default {
		data() {
			return {
				rechargeList: [{
					name: 'PixPay-1'
				}, {
					name: 'PixPay-2'
				}],
				chargeAmountCurrent: 0,
				rechargeAmount: '',
				charge_list: {},
				curBonus: 0,
				isPar: 1,
				rechargeInfo: {},
				userWallet: {},
				chargeseting: {},
				order_sn: '',
				isLoading: false,
				isBindBank: false
			}
		},
		watch: {
			rechargeAmount: {
				handler(val, oldVal) {
					if (val === '') {
						this.$nextTick(() => {
							this.rechargeAmount = 0
						})
						return
					}
					let charge_list = Object.keys(this.charge_list)

					let chargeAmountCurrent = charge_list.find(item => {
						return parseInt(item) >= parseInt(val)
					})
					this.chargeAmountCurrent = chargeAmountCurrent || charge_list[charge_list.length - 1]
				}
			},
			'userInfo.bank': {
				handler(newVal) {
					this.isBindBank = newVal instanceof Object
				},
				deep: true,
				immediate: true
			}
		},
		computed: {
			...mapState({
				theme: state => state.app.theme,
				userInfo: state => state.app.userInfo,
			}),
			...mapGetters('app', ['isPC']),
		},
		created() {
			this.getWalletInfo()
		},
		methods: {
			getWalletInfo() {
				const {
					USERWALLET
				} = this.$api
				sendMessage({
					flag: USERWALLET,
				})
				uni.$once(USERWALLET, (res) => {
					const {
						code,
						data
					} = res
					if (code === 1) {
						this.charge_list = JSON.parse(data.userinfo.chargeseting.charge_list)
						this.rechargeAmount = this.chargeAmountCurrent = Object.keys(this.charge_list)[0]
						this.chargeseting = data.userinfo.chargeseting
						this.curBonus = this.charge_list[this.rechargeAmount]
						this.isBindBank = data.userinfo.bank instanceof Object
						console.log('this.isBindBank: ', this.isBindBank);
					}
				})
			},

			checkboxChange(e) {
				this.isPar = !e.detail.value.length
			},

			clickCharge(item, key) {
				this.rechargeAmount = key
				this.chargeAmountCurrent = key
				this.curBonus = item
			},

			showToast(title) {
				uni.showToast({
					icon: 'none',
					title
				})
			},

			// H5底部弹出 PC居中弹出
			openPopup() {
				if (!this.isBindBank) {
					uni.showToast({
						title: this.$t('Page.mine.qxbdyhk'),
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: `/pages/Mine/bindBank?isBack=1`
						})
					}, 2000)
					return
				}
				const type = this.isPC ? 'center' : 'bottom'
				this.$refs.rechargePopup.open(type)
			},

			handleClose() {
				this.$refs.rechargePopup.close()
			},

			// 使用 Debounce 修饰符，实现防抖效果
			handeleDeposit: Debounce(function() {
				let i = 0;
				console.log('++i: ', ++i);
				if (this.isLoading) return;
				uni.showLoading({
					title: this.$t('Page.component.loading')
				})
				this.isLoading = true;
				const {
					CHARGE
				} = this.$api,
					data = {
						type: 1,
						price: this.rechargeAmount,
						is_bonus: this.isPar ? 1 : 0
					}
				sendMessage({
					flag: CHARGE,
					content: data
				})
				uni.$once(CHARGE, (res) => {
					uni.hideLoading()
					this.showToast(res.msg)
					this.isLoading = false;
					if (res.code === 1) {
						const url = res?.data?.url
						this.order_sn = res.data.order_sn
						this.handleClose()
						const item = {
							...res.data,
							isRecharge: true
						}
						uni.navigateTo({
							url: `/pages/Mine/wallet/components/payment?item=${encodeURIComponent(JSON.stringify(item))}`
						})
					}
				})
			}, 1000),
		}
	}
</script>

<style lang="scss" scoped>
	.btn {
		background: var(--bg-13);
		box-shadow: inset 0px 4px 4px 0px var(--box-shadow-color-1);
		color: var(--color-28);
		border-radius: 100px;
		cursor: pointer;
	}

	.wallet-page {
		width: 100%;
		font-family: PingFang SC-Bold, PingFang SC;
		box-sizing: border-box;

		.card {
			display: flex;
			flex-direction: column;
			background: var(--bg-9);
			border-radius: 15px;
			padding: 15px;
			box-sizing: border-box;

			.con-title {
				font-size: 13px;
				font-weight: bold;
				color: #FFFFFF;
			}

			.rechargeInput {
				width: 100%;
				display: flex;
				align-items: center;
				height: 40px;
				margin-top: 10px;

				.coin {
					width: 40px;
					font-size: 25px;
					font-weight: bold;
					color: #FFFFFF;
				}

				.uni-input {
					font-weight: 700;
					padding: 0 15px;
					height: 40px;
					background: var(--bg-40);
					border-radius: 5px;
					color: #fff;
					font-size: 14px;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
				}
			}

			.rechargeAmountBox {
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				margin-top: 20px;
				box-sizing: border-box;

				.chargeAmount {
					width: calc((100% - 10px) / 2);
					background: var(--bg-36);
					border-radius: 5px;
					padding: 7px;
					margin: 0 10px 10px 0;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
					color: #FFFFFF;
					cursor: pointer;

					&.chargeAmountActive {
						background: var(--bg-26);
						box-shadow: inset 0px 4px 4px 0px var(--box-shadow-color-1);
						color: var(--color-28);

						.bouns-money {
							color: var(--color-28);
							opacity: .75;
						}
					}

					&:nth-child(2n) {
						margin-right: 0;
					}

					view {
						font-size: 15px;
						font-weight: bold;
						line-height: 22px;
					}

					.bouns-money {
						color: var(--color-19);
					}
				}
			}

			.noParBox {
				margin-top: 5px;
				width: 100%;
				color: #fff;
				display: flex;
				align-items: center;

				/deep/ .uni-checkbox-input {
					transform: scale(0.8);
					border: 2px solid var(--color-15);
					border-radius: 4px;
					background-color: transparent;
				}

				/deep/ .uni-checkbox-input-checked {
					border: 2px solid var(--color-15);
					background-color: var(--color-15);
				}
			}

			.remark {
				word-break: break-all;
				font-size: 13px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #AB988F;
				line-height: 15px;
			}
		}

		.payType {
			margin-top: 10px;
			display: flex;
			flex-direction: column;
			padding: 15px;
			background: var(--bg-9);
			border-radius: 15px;
			box-sizing: border-box;

			.title {
				font-size: 13px;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 18px;
				margin-bottom: 15px;
			}

			.pay-item {
				display: flex;
				align-items: center;
				font-size: 16px;
				font-weight: bold;
				color: #FFFFFF;
				padding: 12px 10px;
				background: var(--bg-41);
				border-radius: 5px;
				box-sizing: border-box;
				margin-bottom: 10px;

				&:last-child {
					margin-bottom: 0;
				}

				.check-icon {
					width: 16px;
					height: 16px;
					margin-right: 10px;
				}
			}
		}

		.submit-btn {
			width: calc(100% - 30px);
			margin: 10px auto 15px;
			height: 45px;
			line-height: 45px;
			text-align: center;
			font-size: 18px;
			font-weight: bold;
		}

		.popup-cont {
			width: 100%;
			padding: 15px 15px 30px;
			border-radius: 15px 15px 0 0;
			background: var(--bg-38);
			opacity: 0.95;
			color: #fff;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;

			.header {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 15px;

				.title {
					font-size: 16px;
					font-weight: bold;
					color: var(--color-17);
				}

				.close-icon {
					width: 25px;
					height: 25px;
					cursor: pointer;
				}
			}

			.row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 40px;

				view {
					font-size: 15px;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 18px;

					&:first-child {
						color: var(--color-34);
					}
				}

				.bouns {
					color: var(--color-1);
				}
			}


			.confrim-btn {
				height: 45px;
				line-height: 45px;
				text-align: center;
				font-size: 18px;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				margin-top: 30px;
				cursor: pointer;
				// color: var(--color-28);
			}
		}
	}

	@media screen and (min-width:768px) {
		.wallet-page {

			.payType {
				margin-top: 30px;

				.pay-item {
					border-radius: 10px;
				}
			}

			.rechargeAmountBox {
				padding-left: 25px;

				.chargeAmount {
					width: 130px !important;
					background: #6C483A;
					border-radius: 5px;
					padding: 7px;
					margin: 0 10px 10px 0;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
					margin-left: 15px !important;
					margin-right: 0 !important;
					margin-bottom: 15px !important;

					&.chargeAmountActive {
						background: #E7481A;
					}
				}
			}

			.submit-btn {
				max-width: 315px;
				height: 50px;
				line-height: 50px;
				margin-top: 30px;
			}
		}

		.popup-cont {
			min-width: 375px !important;
			border-radius: 15px !important;
			padding-bottom: 20px !important;
		}
	}
</style>